웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트에서 사용 할 수 있는 자바스크립트 obect, 객체 메소드 두 가지를 알아봅니다. 간단한 문법은 아래와 같습니다.
Object.freeze()
Object.isFrozen()
그럼 이 둘의 사용 방법과 목적에 대하여 알아봅니다.
# 자바스크립트 Object freeze(), isFrozen()
자바스크립트의 객체에는 두 가지 함수 freeze()와 isFronzen()이 있습니다. 이에 대하여 각각 알아보려고 합니다. 먼저 freeze()에 대하여 알아봅니다.! Object의 freeze() 알아보기
객체 타입인 값에 freeze()를 사용하면 값을 변경 할 수 없는(immutable) 값으로 바꿀 수 있습니다. 즉 상수(constant)처럼 변경할 수 없는 값이 됩니다. 값을 바꿀 수도 삭제할 수도 없습니다.
참고로 const로 선언된 객체의 값이라도 내부 프로퍼티 및 메소드의 값을 변경할 수 있습니다. 하지만 freeze()를 사용할 경우 이런 참조 값의 내부 프로퍼티, 메소드도 값 변경이 불가능하게 됩니다. 즉 const와 freeze()의 차이점이라 할 수 있습니다. const만 사용하여 선언된 객체는 변경되나 freeze()를 사용한 경우 변경할 수 없죠. 가장 중요한 부분입니다.
그럼 간단하게 예제를 하나 만들어봅니다.
const constData = { a: 123 };
constData.a = 456;
console.log(constData);
// 456을 출력
constData.a = 456;
console.log(constData);
// 456을 출력
보시는 것처럼 상수 선언(const)이 되었으나 객체 타입의 경우 값이 변경되었습니다. 이제 freeze()를 사용하여 변하지 않도록 immutable하게 만들 수 있을 것입니다. 다시 위의 constData에 freeze()를 사용하고 123으로 변경하면 어떻게 될까요?
Object.freeze(constData);
constData.a = 123;
console.log(constData);
// 456을 출력
constData.a = 123;
console.log(constData);
// 456을 출력
이번에는 값이 변경되지 않고 기존의 값 456을 출력하는 것을 알 수 있습니다. 이처럼 freeze()를 사용하면 객체의 값을 변하지 않도록 만들 수 있습니다.
! Object.isFrozen() 알아보기
그렇다면 isFrozen()은 무엇일까요? 바로 freeze()를 사용하여 변경할 수 없는 상태인지 여부를 확인하기 위해서 만들어진 메소드입니다. isFrozen()은 불리언 값을 반환하며 freeze()된 경우 true를 아닌 경우 false를 반환합니다.
즉, 위의 예제에서 freeze()를 사용하기 이 전에는 false를 반환할 것이고 사용 후에는 true를 반환할 것입니다.
여기까지 자바스크립트의 객체 메소드 freeze(), isFrozen()에 대하여 알아봤습니다.
아래의 글도 찾고 계시지 않나요?